<template>
    <div class="qilin-QilinMenu qilin-wh-100 hide-scrollbar"
        v-if="ownMenuConfig.menuList && ownMenuConfig.menuList.length > 0"
    >
        <el-menu
            ref="menu"
            class="qilin-QilinMenu-menu"
            :default-active="ownMenuConfig.defaultActive ||  ownMenuConfig.menuList[0].id.toString()"
            :default-openeds="ownMenuConfig.defaultOpeneds || [ownMenuConfig.menuList[0].id.toString()] "
            :unique-opened="ownMenuConfig.uniqueOpened || false "
            @open="openMenu"
            @close="closeMenu"
            @select="selectMenu"
        >
            <MenuList v-model:menuList="ownMenuConfig.menuList" @closeMenu="handleCloseMenu"></MenuList>
        </el-menu>
    </div>
</template>

<script setup>
/**
 * 可能是由于递归组件导致的bug
 * 1、@select无法生效
 * 2、uniqueOpened无法生效，无法实现多个子菜单同时展开
 */
// 接收来自父组件的值
const propsValue=defineProps({
    menuConfig:{
        type:Object,
        default(){
            return {
                defaultActive:"", //页面加载时默认激活菜单的index
                defaultOpeneds:[], //默认打开的sub-menu的index的数组
                uniqueOpened:false, //是否只保持一个子菜单的展开
                menuList:[
                    {
                        label:"", //菜单名称
                        id:"", //标识id
                        parentId:"", //父级菜单标识id
                        children:[] //子级菜单数组集
                    }
                ]
            };
        }
    }
});
// 暴露父组件的自定义方法
const emits=defineEmits(["update:menuConfig","closeMenu","openMenu"]);

// 组件自身的配置项
let ownMenuConfig=computed({
    get(){
        return propsValue.menuConfig;
    },
    set(val){
        emits("update:menuConfig",val);
    }
});

// 需要关闭的index
let menuIndex=ref("");
let menuIndexs=reactive({
    data:[]
});
// 之前展开项
menuIndex.value = ownMenuConfig.value.defaultActive ||  ownMenuConfig.value.menuList[0]?.id.toString();
// 之前展开项数组
menuIndexs.data = ownMenuConfig.value.defaultOpeneds ||  [ownMenuConfig.value.menuList[0]?.id.toString()];
// 菜单元素
let menu=ref(null);
// console.log(menuIndex.value,menuIndexs.data,"000");
const handleCloseMenu=(item)=>{
    // console.log(menuIndex.value,1);
    if(!menuIndex.value){
        menuIndex.value = ownMenuConfig.value.defaultActive ||  ownMenuConfig.value.menuList[0]?.id.toString()
        menuIndexs.data = ownMenuConfig.value.defaultOpeneds ||  [ownMenuConfig.value.menuList[0]?.id.toString()];
    };
    // console.log(item,menuIndex.value,2);
    if(item.id == menuIndex.value){ //如果点击的为之前展开的项，则关闭此项
        menu.value.close(item.id);
        return;
    };
    // console.log(menuIndexs.data,3);
    const index=menuIndexs.data.findIndex((item1)=>{return item1 === item.parentId.toString()});
    if(index !== -1){
        if(!menuIndexs.data[index+1]){ //如果之前点击项为展开项内子菜单，则不收缩
            return;
        }else{ //若点击展开项内子菜单时且存在展开的子级菜单，则收缩其内所有的子级菜单
            menu.value.close(menuIndexs.data[index+1]);
            let length = menuIndexs.data.length - index - 1 ;
            for(let i = 1 ; i <= length; i++){
                menu.value.close(menuIndexs.data[index+1+i]);
            }
        }
        // if(menuIndexs.data[index+1]){
        //     console.log(menuIndexs.data[index+1],item.id,4);
        //     if(menuIndexs.data[index+1] == item.id){
        //         menu.value.close(item.id);
        //     }else{
        //         menu.value.close(menuIndexs.data[index+1]);
        //     };
        // };
    }else{
        // console.log(menuIndexs.data[0],5);
        if(menuIndexs.data.includes(item.id.toString())){
            menu.value.close(item.id);
        }else{ //若展开兄弟级菜单，则需要把之前展开项全部依次收缩
            menuIndexs.data.forEach((item)=>{
                menu.value.close(item);
            });
        };
    };
};
const openMenu=(index,indexPath)=>{
    // console.log(indexPath,"===")
    menuIndex.value=index;
    menuIndexs.data=indexPath;
    emits("openMenu",index,indexPath);
};
const closeMenu=(index,indexPath)=>{
    emits("closeMenu",index,indexPath);
};
const selectMenu=(index,indexPath)=>{
    // console.log(index,indexPath);
};

// 调用el-menu组件的close方法
const close=(index)=>{
    menu.value.close(index.toString());
};

// 暴露子组件方法
defineExpose({
    close
});

</script>

<style lang="scss" scoped>
.qilin-QilinMenu{
    :deep(.el-menu){
        border-right-width:0;
        background-color:transparent !important;
        >.el-menu-item{
            color:var(--qilin-text-color-default);
            height:40px;
            line-height:40px;
            padding:0;
            >span{
                width:100%;
                display:inline-block;
            }
            &.is-active{
                color:var(--qilin-color-primary);
                background-color:#E7F7FF;
                position:relative;
                &:after{
                    content:"";
                    position:absolute;
                    width:3px;
                    height:100%;
                    right:0%;
                    top:50%;
                    transform:translateY(-50%);
                    background-color:var(--qilin-color-primary);
                }
            }
            &:hover{
                background-color:rgba(26,133,233,0.04);
            }
        }
    }
    :deep(.el-sub-menu){
        >.el-menu{
            background-color:rgba(26,133,233,0.04)!important;
        }
        .el-sub-menu__title{
            color:var(--qilin-text-color-default);
            height:40px;
            line-height:40px;
            padding:0;
            >span{
                width:100%;
                display:inline-block;
                padding-left:20px;
                z-index:1000;
            }
        }
        .el-menu-item{
            padding:0;
            >span{
                width:100%;
                display:inline-block;
            }
            color:var(--qilin-text-color-default);
            &.is-active{
                color:var(--qilin-color-primary);
                background-color:#E7F7FF;
                position:relative;
                &::before{
                    content:"";
                    position:absolute;
                    left:25px;
                    width:0;
                    height:0;
                    border-top:5px solid transparent;
                    border-bottom:5px solid transparent;
                    border-right:5px solid transparent;
                    border-left:5px solid var(--qilin-color-primary);
                }
                &:after{
                    content:"";
                    position:absolute;
                    width:3px;
                    height:100%;
                    right:0%;
                    top:50%;
                    transform:translateY(-50%);
                    background-color:var(--qilin-color-primary);
                }
            }
        }
        &.is-active{
            .el-sub-menu__title{
                color:var(--qilin-color-primary);
            }
        }
        &.is-opened{
            >.el-sub-menu__title{
                color:var(--qilin-color-primary);
            }
        }
    }
}
</style>
